<template>
  <div class="app-container home">
    <div class="btn-list">
      <el-row>
        <el-button @click="handel_select_Date(5, 'seconds')">近5秒</el-button>
        <el-button @click="handel_select_Date(1, 'minutes')">近1分钟</el-button>
        <el-button @click="handel_select_Date(10, 'minutes')"
          >近10分钟</el-button
        >
        <el-button :autofocus="true" @click="handel_select_Date(1, 'hours')"
          >近1小时</el-button
        >
        <el-date-picker
          class="select-date-picker"
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDate"
        >
        </el-date-picker>
        <el-switch
          class="switch-btn"
          v-model="optenPeriodicUpdate"
          inactive-text="自动刷新"
          @change="handel_changeSwitch"
        />
      </el-row>
    </div>
    <div class="charts-wrapper">
      <div id="myLineChart" ref="line"></div>
      <div id="myPieChart" ref="pie"></div>
    </div>
  </div>
</template>

<script>
import { getHomeChartData } from "@/api/home";
export default {
  name: "Index",
  data() {
    return {
      timeList: [],
      myLineChart: null,
      myPieChart: null,
      optenPeriodicUpdate: false,
      timer: null,
      date: "", // 时间选择器
      currentTime: this.$moment().format("YYYY-MM-DD hh:mm:ss"), // 当前时间
      endTime: this.$moment()
        .subtract(1, "hours")
        .format("YYYY-MM-DD hh:mm:ss"), // 结束时间 默认前1小时
    };
  },
  created() {
    !this.optenPeriodicUpdate &&
      this.getChartsData(this.endTime, this.currentTime);
  },
  mounted() {
    window.addEventListener("resize", this.handelResize);
  },
  methods: {
    handel_select_Date(time, unit) {
      // 快捷时间选择
      this.endTime = this.$moment()
        .subtract(time, unit)
        .format("YYYY-MM-DD hh:mm:ss");
      this.currentTime = this.$moment().format("YYYY-MM-DD hh:mm:ss");
      this.getChartsData(this.endTime, this.currentTime);
    },
    changeDate() {
      // 时间选择器
      this.currentTime = this.$moment(this.date[0]).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      this.endTime = this.$moment(this.date[1]).format("YYYY-MM-DD hh:mm:ss");
      this.getChartsData(this.endTime, this.currentTime);
    },
    handel_changeSwitch() {
      // 自动更新按钮
      if (!this.optenPeriodicUpdate) {
        clearInterval(this.timer);
      } else {
        this.timer = null;
        this.periodicUpdate();
      }
    },
    periodicUpdate() {
      // 自动更新定时器
      if (this.timer) {
        clearInterval(this.timer);
      } else {
        this.timer = setInterval(() => {
          this.getChartsData(this.endTime, this.currentTime);
        }, 5000);
      }
    },
    getChartsData(cTime, eTime) {
      // cTime 当前时间戳 eTime 结束时间戳
      let params = {
        startTime: eTime,
        endTime: cTime,
      };
      getHomeChartData({ params }).then((res) => {
        let data = res.data.result.data;
        this.$nextTick(() => {
          this.myLineChart = this.$echarts.init(this.$refs.line);
          this.myPieChart = this.$echarts.init(this.$refs.pie);
          this.myLineChart.setOption({
            title: {
              text: "Stacked Line",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["clSum", "h2o", "kcl", "ksum"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: data.detectedTime,
            },
            yAxis: {
              type: "value",
            },
            dataZoom: [
              {
                type: "slider",
                start: 0,
                end: 100,
              },
            ],
            series: [
              {
                name: "clSum",
                type: "line",
                stack: "Total",
                data: data.clSum,
              },
              {
                name: "h2o",
                type: "line",
                stack: "Total",
                data: data.h2o,
              },
              {
                name: "kcl",
                type: "line",
                stack: "Total",
                data: data.kcl,
              },
              {
                name: "ksum",
                type: "line",
                stack: "Total",
                data: data.ksum,
              },
            ],
          });
          this.myPieChart.setOption({
            legend: {
              top: "bottom",
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            series: [
              {
                name: "Nightingale Chart",
                type: "pie",
                radius: [50, 250],
                center: ["50%", "50%"],
                roseType: "area",
                itemStyle: {
                  borderRadius: 8,
                },
                data: [
                  { value: 40, name: "rose 1" },
                  { value: 38, name: "rose 2" },
                  { value: 32, name: "rose 3" },
                  { value: 30, name: "rose 4" },
                  { value: 28, name: "rose 5" },
                  { value: 26, name: "rose 6" },
                  { value: 22, name: "rose 7" },
                  { value: 18, name: "rose 8" },
                ],
              },
            ],
          });
        });
      });
    },
    handelResize() {
      if (this.myLineChart) {
        this.myLineChart.resize();
        this.myPieChart.resize();
      }
    },
  },
  deactivated() {
    clearInterval(this.timer);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handelResize);
  },
};
</script>

<style scoped lang="scss">
.home {
  .btn-list {
    margin: 0 10px 15px 10px;
    .switch-btn,
    .select-date-picker {
      margin-left: 10px;
    }
  }
  .charts-wrapper {
    display: flex;
    #myLineChart {
      width: calc(50vw - 95px);
      height: calc(100vh - 175px);
    }
    #myPieChart {
      width: calc(50vw - 95px);
      height: calc(100vh - 175px);
    }
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
